<template>
    <div class="">
        <h1>Tree</h1>
        <tree :data="data" show-checkbox @on-toggle-expand="handleToggleExpand"
            @on-check-change="handleCheckChange"></tree>
    </div>
</template>

<script type="text/javascript">
import tree from '@/components/i-tree/i-tree';

export default {
    data() {
        return {
            data: [
                {
                    title: 'parent 1',
                    expand: true,
                    children: [
                        {
                            title: 'parent 1-1',
                            expand: true,
                            children: [
                                {
                                    title: 'leaf 1-1-1',
                                },
                                {
                                    title: 'leaf 1-1-2',
                                },
                            ],
                        },
                        {
                            title: 'parent 1-2',
                            children: [
                                {
                                    title: 'leaf 1-2-1',
                                },
                                {
                                    title: 'leaf 1-2-1',
                                },
                            ],
                        },
                    ],
                },
            ],
        };
    },
    components: {
        tree
    },
    methods: {
        handleToggleExpand (data) {
            console.log(data);
        },
        handleCheckChange (data) {
            console.log(data);
        }
    }
};
</script>

<style lang="less" scoped></style>
